<div class="bs-docs-section" ng-controller="DropdownDemoCtrl">

  <div class="page-header">
    <h1 id="dropdowns">Dropdowns <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/dropdown/dropdown.js" target="_blank">dropdown.js</a>
    </h1>
    <code>mgcrea.ngStrap.dropdown</code>
  </div>


  <h2 id="dropdowns-examples">Examples</h2>
  <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
  <p>Append a <code>bs-dropdown</code> attribute to any element to enable the plugin.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Dropdowns require the <a href="#tooltips">tooltip plugin</a> to be included.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="dropdown/docs/dropdown.demo.html" data-content-js-url="dropdown/docs/dropdown.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <pre class="bs-example-scope">$scope.dropdown = {{dropdown | json}};</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>

    <!-- Button to trigger a default dropdown from an array ($scope.dropdown) [{text:'foo', href:'', click:''}, ...] -->
    <button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown" aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
      <br />
      <small>(using an object)</small>
    </button>

    <!-- Inlined sibling dropdown -->
    <button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
      <br />
      <small>(using inlined sibling template)</small>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#anotherAction" tabindex="0"><i class="fa fa-download"></i>&nbsp;Some action</a></li>
      <li><a ng-click="$alert('Holy guacamole')" tabindex="0"><i class="fa fa-globe"></i>&nbsp;Display an alert</a></li>
      <li ng-repeat="i in ['Foo', 'Bar', 'Baz']"><a ng-href="#action{{i}}"><i class="fa fa-chevron-right"></i>&nbsp;{{i}}</a></li>
    </ul>

  </div>

  <h2 id="dropdowns-usage">Usage</h2>
  <p>Append a <code>bs-dropdown</code>attribute to any element to enable the directive.</p>
  <div class="callout callout-info">
    <h4>The module exposes a <code>$dropdown</code>service</h4>
    <p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          var myDropdown = $dropdown(element, {scope: {content: [{text:'foo', href:'', click:''}, ...]});
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-dropdown</code> attribute</p>
  <div class="callout callout-info">
    <h4>This module supports exotic placement options!</h4>
    <p>You can position your dropdown in corners (such as <code>bottom-left</code>) or any other combination two.</p>
    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'bottom-left'</td>
          <td>
            how to position the dropdown - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.<br>
            When "auto" is specified, it will dynamically reorient the dropdown. For example, if placement is "auto left", the dropdown will display to the left when possible, otherwise it will display right.
          </td>
        </tr>
        <tr>
          <td>trigger</td>
          <td>string</td>
          <td>'click'</td>
          <td>how dropdown is triggered - click | hover | focus | contextmenu | manual</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>number | object</td>
          <td>0</td>
          <td>
            <p>delay showing and hiding the dropdown (ms) - does not apply to manual trigger type</p>
            <p>If a number is supplied, delay is applied to both hide/show</p>
            <p>Object structure is:
              <code>delay: { show: 500, hide: 100 }</code>
            </p>
          </td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the dropdown to a specific element. Example:
              <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the dropdown in the flow of the document near the triggering element -&nbsp;which will prevent the dropdown from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>Provide an html template as a string (when templateUrl is falsy).</p>
          </td>
        </tr>
        <tr>
          <td>templateUrl</td>
          <td>path</td>
          <td>'dropdown/dropdown.tpl.html'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
            <p>It should be a <code>div.dropdown-menu</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/dropdown/dropdown.tpl.html" target="_blank">like this</a>).</p>
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the dropdown is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the dropdown is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the dropdown is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the dropdown is hidden.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$dropdownProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($dropdownProvider) {
            angular.extend($dropdownProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>
